<template>
  <div class="alarm-page">
    <header>
        <div class="alarm-page__header">警情</div>
    </header>
    <el-container class="alarm-details">
      <ul>
        <li class="alarm-details__li" v-for="(item,index) in nav_name">
            <span> {{nav_names[index]}}： </span>
            <span> {{item.valkey}} </span>
        </li>
      </ul>
    </el-container>
  </div>
</template>

<style type="text/scss" lang="scss" scoped>
  @import "../style/vars";
  * {
    font-size: .16px;
  }
  ul,li {
      list-style-type: none;
      margin:0;
      padding:0;
    }

    .alarm-page {
      height:100%;
      width:100%;
      background-color:white;
      overflow:hidden;
      // min-height:700px;

      &__header {
        height:0.44rem;
        line-height:0.44rem;padding-left:0.28rem;background-color:#efefef;
      }
      .alarm-details {
        width:100%;
        height:100%;
        background-color:white;

        &__li {
          min-width:50%;
          float:left;
          height:0.44rem;
          line-height:0.44rem;
          span {
            display:block;
            float:left;
          }
          span:nth-child(1) {
            width:0.9rem;
            color:#ccc;
            text-align:right;
          }
        }
      }
    }
</style>
<script>
    export default {
      name: 'alarm',
      data() {
        return {
          nav_name: [
            {valkey: '2018-3-18'},
            {valkey: '重庆市渝中分局刑侦大队'},
            {valkey: '2018-3-18'},
            {valkey: '重庆市渝中分局刑侦大队'},
            {valkey: '陈芳芳'},
            {valkey: '13773921323'},
            {valkey: '程凤伟、程伟伟、魏明伟'},
            {valkey: '自行车'},
            {valkey: '自行车'}
          ],
          nav_names: ['接警时间', '接警单位', '立案时间', '立案单位', '报案人', '报案电话', '主/协办人', '涉案价值', '损失价值']
        }
      }
    }
</script>
